<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>消息系统</title>
    <link rel="stylesheet" href="../css/vant.index.css">
    <link rel="stylesheet" href="../css/font_1579476_s0hohgl028.css">
    <style>
        body {
            /* background-color: rgb(248, 248, 248); */
            margin: 0;
            padding: 0;
            background-color: white;
            box-sizing: border-box;
        }

        #container {
            overflow: hidden;
        }

        .search {
            padding-top: 25px;
        }

        .van-field__control {
            text-align: center;
        }

        .msg {
            margin-top: 10px;
            height: 60px;
            background-color: rgb(248, 248, 248);
            border-radius: 30px;
        }

        .msg .wl,
        .msg .yh {
            display: flex;
            width: 50%;
            float: left;
            margin-top: 5px;
        }

        .msg .wl span,
        .msg .yh span {
            display: block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 40px;
            text-align: center;
            border-radius: 25px;
            background-color: #0099FF;
        }

        .msg .wl span {
            margin-left: 20px;
        }

        .msg .yh span {
            font-size: 30px;
            background-color: #FFFF66;
        }

        .msg .wl .text p,
        .msg .yh .text p {
            line-height: 50px;
            font-size: 22px;
            margin: 0;
            padding: 0;
            margin-left: 10px;
        }

        .message {
            /* width: 100%; */
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            /* height: 499px; */
            /* background-color: yellow; */
        }

        .d1 p {
            font-size: 18px;
            padding-left: 15%;
        }

        .message .d1 {
            display: flex;
            width: 100%;
            padding-left: 5px;
            padding-top: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid silver;
        }

        .message .d1 .iconfont {
            font-size: 40px;
            /* background-color: red; */
        }

        .message .d1 .text2 {
            padding-top: 10px;
            padding-left: 20px;
            /* background-color: yellow; */
        }

        .message .d1:active {
            background-color: rgb(247, 248, 250);
        }

        .message .d1 i{
          position: absolute;
          font-style: normal;
          right: 20px;
          /*background-color: red;*/
          padding-top: 10px;
        }
        .message .d1 i .count{
          padding: 0 8px;
          border-radius: 12px;
          border: 1px solid rgb(192, 192, 192);
          background-color: rgb(255, 151, 106);
        }
        .backbtn{
          position: absolute;
          width: 100%;
          bottom: 40px;
          text-align: center;
          font-size: 18px;
          /*background-color: red;*/
        }
        .backbtn span{
          padding: 10px 30px;
          border-radius: 20px;
          background-color: rgb(248, 248, 248);;
        }
        .backbtn span:active{
          opacity: 0.5;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="search">
            <van-search placeholder="查询" v-model="value" show-action>
                <div slot="action" @click="onSearch">搜索</div>
            </van-search>
        </div>
        <div class="msg">
            <div class="wl">
                <span class="iconfont icon-dingwei"></span>
                <div class="text">
                    <p>交易物流</p>
                </div>
            </div>
            <div class="yh">

                <span class="iconfont icon-youhui"></span>
                <div class="text">
                    <p>活动优惠</p>
                </div>
            </div>
        </div>
        <div class="message">
            <ul>
                <div class="d1" v-for="item in list">
                    <span :class="item.icon"></span>
                    <div class="text2">{{ item.title }}</div>
                    <i v-if="item.count>0"><div class="count">{{ item.count>99?'99+':item.count }}</div></i>
                </div>
            </ul>
        </div>
        <div class="backbtn">
          <span onclick="window.history.go(-1);">返回</span>
        </div>
    </div>
</body>


<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script type="text/javascript" src="../script/vue.js"></script>
<script src="../script/vant.min.js"></script>

<script>
    var app = new Vue({
        el: '#container',
        data: {
            value: '',
            list: [{
                icon: 'iconfont icon-xiaoxi',
                title: '回复我的',
                count: 10
            }, {
                icon: 'iconfont icon-tongxunlu',
                title: '好友列表',
                count: 101
            }, {
                icon: 'iconfont icon-shoujianxiang',
                title: '收件箱',
                count: 0
            }, {
                icon: 'iconfont icon-yanzheng',
                title: '验证消息',
                count: 0
            }, {
                icon: 'iconfont icon-daiban',
                title: '待办事项',
                count: 10
            }, ]
        },
        methods: {
            onSearch: function(data) {
                this.$toast({
                    message: '查不到-' + app.value + '-的内容！',
                    position: 'bottom'
                });
            },
            goBack: function(data) {
            }
        }
    })
</script>



</html>
